<template>
  <div class="item">
    <!-- 海报图片 -->
    <div class="photo">
      <img
        :src="this.film.poster"
        alt=""
        style="display: block; width: 100%; height: 100%; margin-top: -320px"
      />
    </div>
    <!-- 信息 -->
    <!-- <div>{{ this.film }}</div> -->
    <div class="message">
      <div>
        <div class="one">
          <div>
            <span>{{ this.film.name }}</span
            ><span>{{ this.film.item.name }}</span>
          </div>
          <div>{{ this.film.grade }}分</div>
        </div>
        <div>{{ this.film.category }}</div>
        <div>{{ this.film.premiereAt }}</div>
        <div>
          <span>{{ this.film.nation }}|{{ this.film.runtime }}</span>
        </div>
        <div class="van-multi-ellipsis--l2">{{ this.film.synopsis }}</div>
      </div>
    </div>
    <!-- 演职人员 -->
    <div></div>
    <!-- 选座购票 -->
    <div></div>
  </div>
</template>

<script>
import url from "@/config/url";
export default {
  data() {
    return {
      film: {},
    };
  },
  created() {
    // 进来时隐藏底部菜单
    this.$store.commit("film/changeFooter");
    // 获取数据
    this.$http
      .get(url.filmInfo + "?filmId=" + this.$route.params.id)
      .then((res) => {
        console.log(res);
        this.film = res.data.film;
      });
  },

  beforeDestroy() {
    // 退出时显示底部菜单
    this.$store.commit("film/changeFooter");
  },
};
</script>

<style lang="scss" scoped>
body{

background-color: rgba(221, 221, 221, 0.317);
}
.item {

  position:relative 
  .photo {
    height: 300px;
  }

  .message {
    width: 100%;
    height: 200px;
    background-color: white;
    position: absolute;
    top: 180px;
    div {
      margin: 0 10px;
      .one {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
